import QtQuick 2.12
import QtQuick.Controls 2.12


Rectangle{
    id:control

    property int currentItem: 0//当前选中item
    property int spacing: 10//项之间距离
    property int indent: 5//子项缩进距离,注意实际还有icon的距离

    property string onSrc: "/image/on.png"
    property string offSrc: "/image/off.png"

    color: "transparent"//背景
    property alias model: list_view.model

    anchors{
        left: parent.left
        top: parent.top
        margins: 10
    }

    height: list_view.height+10
    width: 180

    ListView{
        id: list_view
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left:parent.left
        height: 30*itemCount

        anchors.margins: 10
        //通过+1来给每个item一个唯一的index
        //可以配合root的currentItem来做高亮
        property int itemCount: 0
        delegate: list_delegate
        clip: true
//            onModelChanged: {
//                itemCount=0;
//            }
    }

    Component{
        id:list_delegate
        Row{
            id:list_itemgroup
            spacing: 5

            //canvas 画项之间的连接线
            Canvas{
                 id:list_canvas
                 width: item_parenticon.width+10
                 height: list_itemcol.height
                 antialiasing: true//开了抗锯齿，线会模糊看起来加粗了
                 property bool isLastItem: (index==parent.ListView.view.count-1)
                 onPaint: {
                     var ctx = getContext("2d")
                     var i=0
                     // setup the stroke
                     ctx.strokeStyle = Qt.rgba(255/255,255/255,255/255,1)//线段颜色
                     ctx.lineWidth=1//粗细
                     ctx.beginPath()
                     ctx.moveTo(width/2,0)

                     //modelData.isparent下方有子节点，此时没有展开符号，要增加线段长度
                     //朝上竖向短线段
                     if(list_itemrow.itemIndex!=4)//如何判断第一个的itemIndex?考虑json增加属性
                     {
                          for(i=0;i<list_itemrow.height/2-5;i++){
                              ctx.lineTo(width/2,i+1);
                              ctx.moveTo(width/2,i+1);
                          }
                          if(!modelData.isparent){
                              for(i=list_itemrow.height/2-5;i<list_itemrow.height/2;i++){
                                  ctx.lineTo(width/2,i+1);
                                  ctx.moveTo(width/2,i+1);
                              }
                          }
                     }

                     //横向线段
                     var curXStart;
                     if(modelData.isparent)
                     {
                         curXStart = width/2+5;
                     }
                     else
                     {
                         curXStart = width/2;
                     }

                     ctx.moveTo(curXStart,list_itemrow.height/2)
                     for(i=curXStart;i<width+5;i+=4){
                         ctx.lineTo(i+4,list_itemrow.height/2);
                         ctx.moveTo(i+4,list_itemrow.height/2);
                     }

                     //竖向向下线段
                     if(!isLastItem){
                         if(modelData.isparent)
                         {
                             ctx.moveTo(width/2,list_itemrow.height/2+5)
                         }
                         else
                         {
                             ctx.moveTo(width/2,list_itemrow.height/2)
                         }

                         for(i=list_itemrow.height/2+5;i<height;i++){
                             ctx.lineTo(width/2,i+1);
                             ctx.moveTo(width/2,i+1);
                         }
                     }
                     ctx.stroke()
                 }
                 //展开符号
                 Image {
                     id:item_parenticon
                     visible: false
                     anchors.left: parent.left
                     anchors.top: parent.top
                     anchors.leftMargin: list_canvas.width/2-width/2
                     anchors.topMargin: list_itemrow.height/2-width/2
                     //根据是否有子项/是否展开加载不同的图片
                     //这里没子项或者子项未展开未off，展开了为on
                     source: item_repeater.count?item_sub.visible?offSrc:onSrc:offSrc

                     //展开点击响应
                     MouseArea{
                         anchors.fill: parent
                         onClicked: {
                             if(item_repeater.count)
                                 item_sub.visible=!item_sub.visible;
                         }
                     }
                 }
            }

            //项内容：包含一行item和子项的listview
            Column{
                id:list_itemcol

                //这一项的内容，这里只加了一个text
                Row {
                    id:list_itemrow
                    width: control.width
                    height: item_text.contentHeight+control.spacing
                    spacing: 5

                    property int itemIndex;

                    Rectangle{
                        height: item_text.contentHeight+control.spacing
                        width: item_text.contentWidth
                        anchors.verticalCenter: parent.verticalCenter
                        color: (currentItem===list_itemrow.itemIndex)
                               ?Qt.rgba(1/255,1/255,255/255,100/255)
                               :"transparent"//是否为当前选中，选中高亮

                        //字体属性
                        Text {
                            id:item_text
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            text: modelData.text
                            font.pixelSize: 14
                            font.family: "Microsoft YaHei UI"
                            color: Qt.rgba(1,1,1,1)
                        }

                        //点击给出记录
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                currentItem=list_itemrow.itemIndex;
                                console.log("selected",list_itemrow.itemIndex)
                            }
                        }
                    }

                    Component.onCompleted: {
                        list_itemrow.itemIndex=list_view.itemCount;
                        list_view.itemCount+=1;

                        //为父节点时展示展开icon
                        if(modelData.isparent)
                            item_parenticon.visible=true;
                    }
                }

                //放子项
                Column{
                    id:item_sub
                    //上级左侧距离=小图标宽+x偏移
                    x:indent
                    Item {
                        width: 10
                        height: item_repeater.contentHeight
                        //需要加个item来撑开，如果用Repeator获取不到count
                        ListView{
                            id:item_repeater
                            anchors.fill: parent
                            delegate: list_delegate
                            model:modelData.subnodes
                        }
                    }
                }
            }
        }
        //end list_itemgroup
    }
    //end list_delegate

    //model由外部设置，通过解析json,json后续待继续调整
    function setTestData(){
        model=JSON.parse('[
        {
            "text":"1 one",
            "isparent":true,
            "subnodes":[
                {"text":"1-1 two"},
                {
                    "text":"1-2 two",
                    "isparent":true,
                    "subnodes":[
                        {"text":"1-2-1 three"},
                        {"text":"1-2-2 three"}
                    ]
                }
            ]
        },
        {
            "text":"2 one",
            "isparent":true,
            "subnodes":[
                {"text":"2-1 two"},
                {
                    "text":"2-2 two",
                    "isparent":true,
                    "subnodes":[
                        {"text":"2-2-1 three"},
                        {"text":"2-2-2 three"}
                    ]
                }
            ]
        }]')
    }

    Slider {
        anchors.top: list_view.bottom
        anchors.left:control.left
        anchors.margins: 0
        width: control.width
        id: sliderAlpha
        to: 255
        from: 0
        value: 1
        onValueChanged: {
            control.color = Qt.rgba(1/255,1/255,1/255,value/255);
        }
    }

    Label {
        anchors.top: sliderAlpha.bottom
        anchors.left:control.left
        anchors.margins: 5
        id: labelAlpha
        color: "white"
        font.pixelSize: 20
        font.family: "Microsoft YaHei UI"
        text: qsTr("Transparent = "+Math.round((sliderAlpha.value)/2.55))
    }

    Component.onCompleted: {
        myIterator.sigMyOpacity.connect(onMyOpacityChange) // pass double value
    }

    // get value by signal
    function onMyOpacityChange(iValue){
        console.log("function onMyOpacityChange(" + iValue + ")")
        //textEditMyOpacity.text = iValue.toFixed(2);
        sliderAlpha.value = iValue*255;
    }
}
